import React, { useRef, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.less';
import TitleBar from '@/src/components/titleBar';
import store from '@/src/store';
import { observer } from 'mobx-react-lite';
import { AtAccordion } from 'taro-ui';
import BottomContainer from '@/src/components/bottomContainer';

const IdentifyRecords: React.FC = () => {
  const mockData: any = [
    {
      date: '2025年7月16日',
      items: [
        {
          id: '1',
          title: 'Cohiba Siglo V',
          subtitle: '高希霸 世纪 五',
          image:
            'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
          time: '10:50:35',
        },
        {
          id: '2',
          title: 'Cohiba Siglo VI',
          subtitle: '高希霸 世纪 六',
          image:
            'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
          time: '08:24:17',
        },
      ],
    },
    {
      date: '2025年7月15日',
      items: [
        {
          id: '3',
          title: 'Montecristo No.2',
          subtitle: '蒙特利斯特罗 二号',
          image:
            'https://file.linkcook.cn/image/wineMiniProgram/search/xuejia.png',
          time: '14:12:05',
        },
      ],
    },
  ];
  const [openList, setOpenList] = useState<number[]>([]);
  const handleClick = (index: number) => {
    const idx = openList.indexOf(index);
    if (idx > -1) {
      // 已展开，点击收起
      setOpenList(openList.filter((i) => i !== index));
    } else {
      // 展开
      setOpenList([...openList, index]);
    }
  };
  return (
    <View
      className="records-container"
      style={{
        paddingTop: `${store.commonStore.pageAreaTop}rpx`,
      }}
    >
      <TitleBar showLeftBack={true} title="识别记录"></TitleBar>
      {mockData.map((group: any, i: number) => (
        <AtAccordion
          key={group.date}
          open={openList.includes(i)}
          title={`${group.date} （${group.items.length}）`}
          onClick={() => handleClick(i)}
          hasBorder={false}
          className="my-accordion"
        >
          <View className="ciga-list">
            {group.items.map((item: any) => (
              <View className="record-item" key={item.id}>
                <View className="record-info">
                  <Text className="item-title">{item.title}</Text>
                  <Text className="item-time">{item.time}</Text>
                  <View className="item-subtitle">{item.subtitle}</View>
                </View>
                {item.image && (
                  <Image src={item.image} className="record-img" />
                )}
              </View>
            ))}
          </View>
        </AtAccordion>
      ))}
      <BottomContainer />
    </View>
  );
};

export default observer(IdentifyRecords);
